<style type="text/css">
	.gh-gl {
		position: absolute;
		top: 50%;
		left: 50%;
		width: 80%;
		text-align: center;
		-webkit-transform: translate(-50%, -50%);
		-ms-transform: translate(-50%, -50%);
		transform: translate(-50%, -50%);
	}
	.gh-gl-item {
		display: block;
		margin-bottom: .2em;
		padding-top: .5em;
		padding-bottom: .5em;
		background-color: rgba(255, 255, 255, .8);
	}
	.pr-copyright {
		position: absolute;
		bottom: 0;
		width: 100%;
	}
	.ellipsis {
		padding-top: 1px;
	}
	.share-material {
		width: 80%;
		top: 20%;   
		left: 50%;  
		margin-left: -40%;   
		position: absolute;
		z-index:99999;
		background-color:#fff;
		border-radius: 0.2em;
		overflow: hidden;
		display:none;
	}
	.share-material-tit {
		padding: 10px;
		background-color: #ff746c;
	}
	.share-material-tit-txt{
		color:white;
	}
	.share-material-content {
		padding: 10px;
	}
	.share-material-list a.link {
		width: 100%;
		float: left;
		line-height:1.5em;
	}
	.btn-cancel {
		margin-top: 0.5em;
	}
	
	.my-ac-list-item {
		background-color:#fff;
		border: 1px solid #ccc;
		border-radius: 3px;
		padding: 9px;
		margin: 9px;
	}
	.ac-img {
		width:4em;
		height: 4em;
	}
	.ac-goods {
		min-height: 4em;
	}
	.ac-goods-count {
		border-top: 1px solid #ccc;
		border-top-style: dashed;
		margin-top: 10px;
		display:flex;
		height: 3em;
	}
	.ac-goods-count p {
		flex: 1;
	}
	.ac-goods-count p span {
		color: #888;
		width: 100%;
		clear: both;
		float: left;
		text-align: center;
	}
</style>

<div id="share-mask" style="width: 100%; height: 100%;background-color: #000; position: absolute; opacity: 0.8;z-index:9999;display:none;"></div>
<div class="share-material">
	<div class="share-material-tit">
		<p class="share-material-tit-txt">请选择推广的素材</p>
	</div>
	<div class="share-material-content">
		<p class="share-material-list">加载素材..</p>
		<p><a href="#" class="btn btn-orange w100 btn-cancel">取消</a></p>
	</div>
</div>

<include file="headerBar"/>

<style type="text/css">
	.gh-tip { 
		top: 0;
		left: 0;
		position: relative;
	}
	.pr-copyright {
		position: relative;
	}
</style>

<volist id="vo" name="goodsLists">
<div class="my-ac-list-item" product-id="{$vo.id}">
	<div class="ac-goods">
		<p class="ac-img fl">
			<img class="fl" src="{$vo['imageFirst']}" >
		</p>
		<div style="margin-left: 4.5em;">
			<p>{$vo.name}</p>
			<p>售价:￥{$vo.price}</p>
			<p>佣金:￥{$vo.myBouns}</p>
		</div>
	</div>
</div>
</volist>

<!-- 列表模板 -->
<template id="pr-list-tpl">
  {{each extra as value}}
  <a href="{{value.url}}" class="link">【素材】{{value.name}}</a>
  {{/each}}
</template>

<script type="text/javascript">
	var sid = {$sid};
	$(".btn-cancel").click(function() {
		$("#share-mask").hide();
		$(".share-material").hide();
	});
	
	$(document).delegate('.my-ac-list-item', 'click', function() {
		$("#share-mask").css({'height':$(document).height()}).show();
		$(".share-material").css({'top':$("body").scrollTop()+50}).show();
		$(".share-material-list").html("加载素材..");
		$.post("{:U('DisShop/materialList')}", {'id':$(this).attr('product-id'), 'sid':sid}, function( data ) {
		      require(["artTemplate"], function(T) {
		          var html = T("pr-list-tpl", data);
		          $(".share-material-list").html( html );
		      });
		});
	});
	
	$(document).scroll(function(e) {
		$(".share-material").css({'top':$("body").scrollTop()+50}); 
	});
</script>